<template>
    <swiper :options="swiperOption" ref="mySwiper">
      <swiper-slide>
        <div class="banner home-box"><img src="../assets/img/jianguo2.png">
        </div>
      </swiper-slide>
      <swiper-slide>
        <div class="banner home-box"><img src="../assets/img/huawei1.jpg">
        </div>
      </swiper-slide>
      <swiper-slide>
      <div class="banner home-box"><img src="../assets/img/iphone.png">
      </div>
      </swiper-slide>
      <swiper-slide>
        <div class="banner home-box"><img src="../assets/img/xiaomi1.png">
        </div>
      </swiper-slide>
    </swiper>
</template>

<script>
import "swiper/dist/css/swiper.css"
import { swiper, swiperSlide } from "vue-awesome-swiper"
    export default {
      name: "carousel",
      components: {
        swiper,
        swiperSlide
      },
      data() {
          return {
            swiperOption: {
              pagination: {
                el: ".swiper-pagination",
                dynamicBullets: true
              },
              autoplay: {
                delay: 2500,
                disableOnInteraction: false
              }
            }
          };
      },
      computed: {
        swiper() {
          return this.$refs.mySwiper.swiper
        }
      },
      mounted() {
        console.log("this is current swiper instance object", this.swiper);
        this.swiper.slideTo(3,1000,false)
      }
    }
</script>

<style scoped>
  img {
    width: 1200px;
    height: 499px;
    border-radius: 5px;
  }
  .banner {
    position: relative;
    margin-top: 9px;
    height: 499px;
    padding-left: 60px;
  }
  .home-box {
    overflow: hidden;
    position: relative;
    z-index: 0;
    margin-top: 25px;
    box-sizing: border-box;
    /*border: 1px solid rgba(0,0,0,.14);*/
    border-radius: 8px;
    box-shadow: 0 3px 8px -6px rgba(0,0,0,.1);
  }
</style>
